<!-- 订单核销 -->
<template>
	<view class="chenk-page">
	  <PageWarpper page-name="订单核销">
	    <template v-slot:main>
			<view class="check-verify">
			  <view
			    class="details d-flex border-top border-bottom"
			    v-for="(item, index) in list"
			    :key="index"
			  >
			    <view class="thumb bg-cover border-right" v-if="item.productType == 1" :style="{ backgroundImage: 'url(' + item.productPictureUrl + ')' }"></view>
			    <OrderInfo
			      style="flex: 1"
			      :item-data="item"
			      :btn-name="item.orderStatus == 1 ? '确认核销' : '已核销'"
			      @btnClick="btnClick"
			    />
			  </view>
			  <view style="margin-top: 136px" v-if="list.length == 0">
			    <EmptyCard
			      :info="{
			        icon: 'empty_icon2',
			        iconWidth: '210rpx',
			        tip: '暂无订单',
			        es: 'No Orders',
			        desc: '您还没有此类订单',
			      }"
			    />
			  </view>
			</view>
		</template>
		</PageWarpper>
		 <FooterBar :tab-index="2" />
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import FooterBar from "@/components/FooterBar/index.vue";
import OrderInfo from "@/components/List/OrderInfo.vue";
import EmptyCard from "@/pages/empty/Card.vue";
import { ref } from "vue";
import { orderVerifList, orderVerifyByOrderNo } from "@/server/api.js";

let list = ref([]);

let code = ref(""); // 状态

onLoad(options => {
  code.value = options.orderNo;
  queryOrderList();
});

// query order info
function queryOrderList() {
  orderVerifList({
    code: code.value,
    current: 1,
    size: 30,
  }).then(res => {
    console.log(res);
    list.value = res.data.records;
  });
}

function btnClick(itemData) {
  vertifyClick(itemData.orderNo);
}

function vertifyClick(orderNo) {
  orderVerifyByOrderNo({
    orderNo: orderNo,
  }).then(res => {
    if (res.data.status) {
      uni.showToast({
        title: "核销成功",
        icon: "none",
      });
      queryOrderList();
    } else {
      uni.showToast({
        title: res.data.reason,
        icon: "none",
      });
    }
  });
}
</script>

<style lang="scss" scoped>
#app.content {
  padding-bottom: 0px;
}
.page-name {
  padding-bottom: 50rpx;
}
.check-verify {
	padding-bottom: 200px;
  .details {
	margin-bottom: 34rpx;
    background-color: #ffffff;
    .thumb {
      width: 154rpx;
    }
  }
}
button {
  margin-top: 104rpx;
  width: 238rpx;
  height: 68rpx;
  line-height: 68rpx;
}
</style>
